<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
// Supports weights 100-900
import "@fontsource-variable/inter/opsz.css";
export default {
  name: "App",
};
</script>

<style lang="scss">
@media (max-width: 850px) {
  body {
    overflow-x: auto;
  }
}
/* 屏幕宽度≤1000px时生效 */
@media (max-width: 1000px) {
  html {
    /* 固定font-size为1000px时的数值，停止缩放 */
    font-size: 10px;
  }
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #000;
  font-size: 16px;
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f5f2ea;
  min-width: 1000px; /* 强制最小宽度为1200px */
  overflow-x: auto; /* 宽度不足时显示横向滚动条 */
  width: 100%;
  // .router-view-container {
  //   margin-left: 252px;
  // }
}

/* 设置所有元素的 box-sizing 为 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  /* 设置全局的margin为0 */
  padding: 0;
}
.el-picker-panel {
  .el-date-table {
    width: 100%;

    /* 日期单元格 */
    td {
      position: relative;
      height: 32px;
      vertical-align: middle;
      div {
        height: 24px;
      }
      .start-date div {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .end-date div {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      /* 日期数字容器 */
      span {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        margin: 0 auto !important;
        line-height: 24px !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 3px !important; /* 强制3px圆角 */
        text-align: center;
        z-index: 1;
      }

      /* 今天日期样式 */
      &.today span {
        color: #000 !important;
        // background: #4485e9 !important;
        font-weight: bold !important;
        border: 1px solid #4485e9;
      }
    }
  }
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background: rgba(218, 231, 251, 1) !important;
  // background-color: rgba(218, 231, 251, 1) !important;
  color: rgba(35, 35, 35, 1) !important;
}
/* 只保留这处，控制范围选择的背景色 */
::v-deep .el-date-table td.in-range div,
::v-deep .el-date-table td.in-range div:hover {
  // background-color: rgba(218, 231, 251, 1)  !important; /* 范围背景色（统一用这个） */
  color: #1890ff !important;
  border-radius: 4px;
  font-weight: 500;
}
/* 全局样式中添加（无 scoped） */
/* 提高选择器优先级：通过 body + 多层父级定位 */
.el-picker-panel {
  /* 图标按钮默认状态 */
  .el-picker-panel__icon-btn {
    /* 强制覆盖默认颜色（替换为你需要的颜色） */
    color: #333 !important; /* 示例：深灰色 */
    margin: 0 4px !important;
    cursor: pointer;
  }

  /* 图标按钮 hover 状态（确保覆盖） */
  .el-picker-panel__icon-btn:hover {
    color: #4485e9 !important; /* hover 颜色 */
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
  }

  /* "今天"按钮样式 */
  .el-picker-panel__link-btn {
    color: #4485e9 !important;
    font-size: 14px !important;
  }
}
.el-message {
  /* 调整提示框大小 */
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 14px;
  max-width: 280px; /* 最大宽度 */
}

/* 调整提示图标大小 */
.el-message__icon {
  font-size: 16px;
  margin-right: 8px;
}

/* 在 App.vue 的 <style> 中（不加 scoped） */
body .el-select-dropdown__item {
  font-family: "Inter Variable", sans-serif;
  font-size: 0.0972rem !important;
}

body .el-select .el-input__inner {
  font-family: "Inter Variable", sans-serif;
}
/* 调整提示内容间距 */
.el-message__content {
  line-height: 1.5;
}
::v-deep .el-date-table td.active.start-date div {
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
}
/* 3. 月份/年份选择面板（切换年月时） */
::v-deep .el-month-table td .cell,
::v-deep .el-year-table td .cell {
  color: #333 !important;
  font-size: 14px !important;
  &:hover {
    background-color: #f5f7fa !important;
  }
}
/* 在 App.vue 的全局样式中添加（不带 scoped） */
body .el-picker-panel .el-date-table td.start-date div {
  margin-left: 8px !important; /* 保留原有边距 */
  border-top-left-radius: 3px !important; /* 强制修改为 3px */
  border-bottom-left-radius: 3px !important;
}

/* 同时建议统一结束日期的圆角，保持一致性 */
body .el-picker-panel .el-date-table td.end-date div {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  margin-left: 8px;
}

body .el-picker-panel .el-date-table td {
  font-family: "Inter Variable", sans-serif !important; /* 统一字体 */
  font-size: 14px !important; /* 字号 */
  color: #000;
  font-weight: 500;
}
/* 禁用的日期（过去/未来不可选日期） */
body .el-picker-panel .el-date-table td.disabled span {
  color: #cdcccc !important; /* 浅灰色，弱化显示 */
  font-size: 14px !important; /* 比当月日期小1-2px */
  font-weight: 500 !important; /* 更细的字体 */
  line-height: 22px;
  letter-spacing: 0%;
  color: #232323;
}
body .el-picker-panel .el-date-table td.prev-month span {
  color: #cdcccc !important; /* 浅灰色，弱化显示 */
  font-size: 14px !important; /* 比当月日期小1-2px */
  font-weight: 500 !important; /* 更细的字体 */
  line-height: 22px;
  letter-spacing: 0%;
}

/* 下个月的日期（当前月后面显示的日期，如5月日历中的6月1/2/3日） */
body .el-picker-panel .el-date-table td.next-month span {
  color: #cdcccc !important; /* 浅灰色，弱化显示 */
  font-size: 14px !important; /* 比当月日期小1-2px */
  font-weight: 500 !important; /* 更细的字体 */
  line-height: 22px;
  letter-spacing: 0%;
}
/* 添加到你的全局样式中 */
body .el-picker-panel .el-date-table td.active span {
  color: #232323;
}
body .el-picker-panel .el-date-table td.start-date span {
  font-size: 14px !important; /* 比当月日期小1-2px */
  font-weight: 500 !important; /* 更细的字体 */
  line-height: 22px;
  letter-spacing: 0%;
  color: #fff;
  background: #4485e9;
}

/* 结束日期的文字样式 */
body .el-picker-panel .el-date-table td.end-date span {
  font-size: 14px !important; /* 比当月日期小1-2px */
  font-weight: 500 !important; /* 更细的字体 */
  line-height: 22px;
  letter-spacing: 0%;
  background: #4485e9;
  color: #fff;
}

/* 日期选择器头部整体容器 */
.el-picker-panel__header {
  height: 40px !important; /* 固定头部高度，确保足够空间 */
  display: flex !important; /* 使用flex布局 */
  align-items: center !important; /* 垂直方向居中对齐 */
  justify-content: space-between !important; /* 水平方向分散排列 */
  padding: 0 10px !important; /* 调整内边距，避免内容贴边 */
  color: #000;
  line-height: 22px !important; /* 与容器高度一致，实现文字垂直居中 */
  font-size: 14px !important; /* 可根据需要调整字号 */
  font-weight: 400 !important; /* 标题加粗，提升视觉权重 */
}

/* 年月标题（如“2025 April”） */
.el-picker-panel__link {
  height: 100% !important;
  line-height: 22px !important; /* 与容器高度一致，实现文字垂直居中 */
  font-size: 14px !important; /* 可根据需要调整字号 */
  font-weight: 400 !important; /* 标题加粗，提升视觉权重 */
  color: #000 !important;
}

/* 左右箭头按钮 */
.el-picker-panel__icon-btn {
  height: 30px !important;
  width: 30px !important;
  display: flex !important; /* 按钮内部flex布局 */
  align-items: center !important; /* 图标垂直居中 */
  justify-content: center !important; /* 图标水平居中 */
  margin: 0 2px !important; /* 调整按钮间距 */
  color: #000 !important;
}
/* 全局样式中添加（无 scoped） */
/* 提高选择器优先级：通过 body + 多层父级定位 */
.el-picker-panel {
  /* 图标按钮默认状态（重点修改箭头颜色） */
  .el-picker-panel__icon-btn {
    margin: 0 4px !important;
    cursor: pointer;

    /* 箭头图标（伪元素）的默认颜色 */
    &::before {
      color: #000 !important; /* 箭头默认颜色（改为黑色） */
      font-size: 16px !important; /* 箭头大小（可选） */
      font-weight: 500;
    }
  }

  /* 图标按钮 hover 状态（箭头颜色） */
  .el-picker-panel__icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;

    /* 箭头 hover 时的颜色 */
    &::before {
      color: #4485e9 !important; /* 箭头 hover 颜色（蓝色） */
    }
  }

  /* 日期选择器星期头部单元格样式 */
  .el-date-table th {
    /* 星期文字颜色 */
    color: #232323 !important;
    /* 字体大小 */
    font-size: 14px !important;
    /* 字体粗细 */
    font-weight: 500 !important;
    /* 重点：上方内边距加大，下方内边距减小 */
    padding-top: 20px !important; /* 上方间距（数值越大，上方空间越高） */
    padding-bottom: 0px !important; /* 下方间距（数值越小，离日期越近） */
    /* 文字对齐方式 */
    text-align: center !important;
    /* 去除默认边框 */
    border-bottom: none !important;
  }

  /* 在 App.vue 的全局样式中添加 */
  .el-date-range-picker__content .el-date-range-picker__header div {
    font-size: 14px !important; /* 调整年月文本大小 */
    color: #000 !important; /* 文本颜色 */
    font-family: "Inter Variable", sans-serif;
    font-weight: 400;
    // font-family: "PingFang SC", sans-serif !important; /* 统一字体 */
  }
}
/* 全局样式（无 scoped），直接定位星期头部单元格 */
.el-picker-panel .el-date-table th {
  position: relative !important;
  color: transparent !important; /* 彻底隐藏原始文字 */
  font-size: 14px !important;
  height: 36px !important;
}

/* 逐个替换星期缩写（1-7对应周日到周六） */
.el-picker-panel .el-date-table th:nth-child(1)::before {
  content: "S" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important; /* 文字颜色 */
  font-weight: 500 !important;
  z-index: 10 !important; /* 确保在最上层 */
}

.el-picker-panel .el-date-table th:nth-child(2)::before {
  content: "M" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}

.el-picker-panel .el-date-table th:nth-child(3)::before {
  content: "T" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}

.el-picker-panel .el-date-table th:nth-child(4)::before {
  content: "W" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}

.el-picker-panel .el-date-table th:nth-child(5)::before {
  content: "T" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}

.el-picker-panel .el-date-table th:nth-child(6)::before {
  content: "F" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}

.el-picker-panel .el-date-table th:nth-child(7)::before {
  content: "S" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #232323 !important;
  font-weight: 500 !important;
  z-index: 10 !important;
}
</style>
